Upcoming Changes to Flex Styles (codename:Moxie)

In the last three weeks or so, I’ve been testing the feature work of Jason Szeto who changed the way the styles for many components get passed on to their subcomponents. This “StyleProxy” feature for Flex makes the framework more explicit regarding the styles that are passed through from a component to its subcomponents. Subcomponents used to get all of its styles from its parent component. For example, if you set a style like cornerRadius on a DateChooser, this style was inherited by the nextMonth and prevMonth buttons. This was probably not your intention. You probably only wanted the cornerRadius to affect the DateChooser itself. Just to be clear what some of the “subcomponents” of Components are, here are a few brief examples:

Component	Sub-Components
DateField	TextField, Button (with calendar icon), DateChooser
MenuBar	Sub-menus
Accordion	Accordion Headers
NumericStepper	TextField, up button, down button
ColorPicker	swatch panel

With the changes with this StyleProxy feature, you will be able to explicitly set the styles of these sub-components. Some of the components now have a style filter that specifies which non-inheriting styles will be passed from the parent component to its sub-component. (Inheriting styles have not changed). Here is an example of a style filter in DateChooser:

protected function get nextMonthStyleFilters():Object { return _nextMonthStyleFilters; }private static var _nextMonthStyleFilters:Object = { “highlightAlphas” : “highlightAlphas”, “nextMonthUpSkin” : “nextMonthUpSkin”, “nextMonthOverSkin” : “nextMonthOverSkin”, “nextMonthDownSkin” : “nextMonthDownSkin”, “nextMonthDisabledSkin” : “nextMonthDisabledSkin”, “nextMonthSkin” : “nextMonthSkin”, “repeatDelay” : “repeatDelay”, “repeatInterval” : “repeatInterval” };

The _nextMonthStyleFilters object specifies the non-inheriting styles that will be passed onto the nextMonth button in a DateChooser. If you want to change what styles get passed to the nextMonth button, you would subclass DateChooser and override this nextMonthStyleFilters getter.

Other components like MenuBar do not use this concept of a style filter, however, the way they handle non-inheriting styles has changed. The sub-menus of a MenuBar will no longer get non-inheriting styles like backgroundColor from its parent MenuBar. Instead, you would need to specify backgroundColor in the “menuStyleName”. In Flex 2.0.1, this will work:

<mx:MenuBar backgroundColor=”0xFF0000″ dataProvider=”{someData}” />

However, in future versions of Flex (codename:Moxie), the backgroundColor set on MenuBar won’t affect the sub-menus. To have the backgroundColor affect the sub-menu, you need to use the menuStyleName style. Here is an example:

<mx:Style>
.myStyle {
backgroundColor: #FF0000;
}
</mx:Style>

<mx:MenuBar menuStyleName=”myStyle” dataProvider=”{someData}” />

Here is a list of Components that are changing:

Component/Container	Change to Styles
Accordion	The Accordion headers don’t get non-inherited styles like fillColors from the Accordion. Instead, use headerStyleName.
ColorPicker	The swatch panel does not get non-inherited styles like columnCount, textFieldWidth, horizontalGap etc. from the ColorPicker anymore. Instead, these styles should be set using the swatchPanelStyleName.
ComboBox	The dropdown does not get non-inherited styles set from the ComboBox. Instead, use dropdownStyleName.
DateChooser	The nextMonth, prevMonth, nextYear, prevYear buttons and the calendar layout don’t get all of its styles from DateChooser anymore. To use different styles, subclass DateChooser and change the style filters.
DateField	The DateChooser pop-up doesn’t get non-inheriting styles from the DateField anymore. Use the dateChooserStyleName instead.
LinkBar	The LinkButtons don’t get non-inheriting styles from the LinkBar. Use linkButtonStyleName.
MenuBar	The sub-menus no longer get non-inheriting styles like backgroundColor and backgroundAlpha from MenuBar. Use the menuStyleName instead.
NumericStepper	Some styles are no longer passed from the NumericStepper to the up button, down button and/or TextField (some examples include borderColor). BorderColor no longer affects the buttons. To change the inherited styles subclass NumericStepper and change the style filters.
TabNavigator	Tabs no longer get non-inherited styles from TabNavigator. Instead, use the ‘tabStyleName’.
All PopUps	PopUps used to get styles from the parentApplication. PopUps will get styles from their ‘owner’

If you are compiling your Application in the newest version of Flex and you don’t want to have to update your application, you can get the old behavior by compiling your app with the -compatibility-version=2.0.1 argument.

These changes to style behaviors are available for your testing if you want to download a Flex SDK Nightly Build. The check-ins for these changes start at build 174443 and end around changelist 177145.